<!DOCTYPE HTML>
<script src="../../resources/js-test.js"></script>
<style>
    #controlsimple { color: rgb(10,180,30); }
    #simple        { color: rgb(calc(10),calc(18 * 10),calc(30)); }
    #controlpercentsimple { color: rgb(10%,95%,30%); }
    #percentsimple        { color: rgb(calc(2% + 8%),calc(95%),calc(3% * 10)); }
    #controlpercentnumber { color: rgb(26,240,80); }
    #percentnumber        { color: rgb(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4)); }

    #controlalpha { color: rgba(10,180,30,0.7); }
    #alpha        { color: rgba(calc(10),calc(180),calc(30), calc(0.35 * 2)); }
    #controlpercentalpha { color: rgba(10%,95%,30%,0.7); }
    #percentalpha        { color: rgba(calc(2 * 5%),calc(100% - 5%),calc(30%),calc(0.2 * 3 + 0.1)); }
    #controlpercentnumberalpha { color: rgba(26,240,80, 0.5); }
    #percentnumberalpha        { color: rgba(calc(2% + 8% + 1),calc(95% - 3),calc(3% * 10 + 4), calc(1.0 / 2)); }
</style>
<div id="test-container">
    <hr/>
    <div id="controlsimple">These two sentences should be the same color (simple)</div>
    <div id="simple">These two sentences should be the same color (simple)</div>
    <hr/>
    <div id="controlpercentsimple">These two sentences should be the same color (simple percent)</div>
    <div id="percentsimple">These two sentences should  be the same color (simple percent)</div>
    <hr/>
    <div id="controlpercentnumber">These two sentences should be the same color (percent number)</div>
    <div id="percentnumber">These two sentences should  be the same color (percent number)</div>
    <hr/>
    <div id="controlalpha">These two sentences should be the same color (alpha)</div>
    <div id="alpha">These two sentences should be the same color (alpha)</div>
    <hr/>
    <div id="controlpercentalpha">These two sentences should  be the same color (percent alpha)</div>
    <div id="percentalpha">These two sentences should  be the same color (percent alpha)</div>
    <hr/>
    <div id="controlpercentnumberalpha">These two sentences should be the same color (percent number alpha)</div>
    <div id="percentnumberalpha">These two sentences should  be the same color (percent number alpha)</div>
</div>
<script>
    description("Tests that CSS3 calc() can be used with the rgb() and rgba() functions");
    
    tests = ["simple", "percentsimple", "percentnumber", "alpha", "percentalpha", "percentnumberalpha"];

    for (i = 0; i < tests.length; i++) {
        var test = tests[i];
        shouldBeEqualToString('getComputedStyle(document.getElementById("' + test + '"), null).color', getComputedStyle(document.getElementById("control" + test), null).color);
    }

    if (window.testRunner)
        document.body.removeChild(document.getElementById("test-container"));
</script>
